import { Component, Input, OnInit } from '@angular/core';
import { ChartData } from '../chart-option';

@Component({
  selector: 'app-graph-chart',
  templateUrl: './graph-chart.component.html',
  styleUrls: ['./graph-chart.component.scss']
})
export class GraphChartComponent implements OnInit {
  constructor() {}

  @Input() title = '账号状态'; // 图的标题
  @Input() subText = ''; // 额外内容
  @Input() categories = [
    {
      name: '培育完成'
    },
    {
      name: '培育中'
    },
    {
      name: '被封'
    },
    {
      name: '未培育'
    },
    {
      name: '维护中'
    }
  ];
  @Input() data = [
    {
      name: '培育完成',
      symbolSize: 80,
      x: 0,
      y: 0,
      value: 2503,
      category: 0
    },
    {
      name: '培育中',
      symbolSize: 77,
      x: -0.3,
      y: 1,
      value: 1888,
      category: 1
    },
    {
      name: '被封',
      symbolSize: 75,
      x: 1,
      y: 0.3,
      value: 783,
      category: 2
    },
    {
      name: '未培育',
      symbolSize: 76,
      x: -1,
      y: -0.3,
      value: 854,
      category: 3
    },
    {
      name: '维护中',
      symbolSize: 72,
      x: 0.3,
      y: -1,
      value: 514,
      category: 4
    }
  ]; // 数据

  theme: string;
  options = {};

  ngOnInit(): void {
    this.options = {
      title: {
        text: this.title,
        subtext: this.subText
      },
      tooltip: {},
      animationDuration: 1500,
      animationEasingUpdate: 'quinticInOut',
      series: [
        {
          type: 'graph',
          layout: 'none',
          // center: ['50%', '50%'],
          data: this.data,
          categories: this.categories,
          label: {
            show: true,
            formatter: '{b}\n{c}'
          }
        }
      ]
    };
  }
}
